<template>
  <div>
      <NavHeader></NavHeader>
      <NavBread>
          <span>Root</span>
      </NavBread>
      <div class="container">
          <p>商品列表:</p>
          <button class="btn btn--m" @click="showAddProduct" >添加商品</button>
          <table>
              <tr>
                  <td>商品Id</td>
                  <td>商品名称</td>
                  <td>商品价格</td>
                  <td>商品图片</td>
                  <td>操作</td>
              </tr>
              <tr v-for="item in rootList" :key="item.productId">
                  <td>{{item.productId}}</td>
                  <td>{{item.productName}}</td>
                  <td>{{item.salePrice}}</td>
                  <td><img :src="'/static/'+item.productImage"/></td>     
                  <td>
                      <a @click="ShowEditProduct(item)">编辑</a>
                      <a @click="mdShow = true,productId = item.productId,loginModelFlag = true">删除</a>
                  </td> 
              </tr>
          </table>
<nav class="nav">
    <ul>
        <li><a @click="page = 0,init()">
                首页
            </a>
        </li>
        <li>
            <a @click="pre">
                <span>&laquo;</span>
            </a>
        </li>
        <li v-for="(item,index) in nav" :key="item.page" @click="checked(index)" :class="{'active':index == page}"><a>{{item.page}}</a></li>
        <li>
            <a @click="next">
                <span>&raquo;</span>
            </a>
        </li>
        <li>
            <a @click="page = lastpage,init()">
                尾页
            </a>
        </li>
    </ul>
</nav>
      </div>
      <div class="md-modal modal-msg md-modal-transition" :class="{' md-show':loginModelFlag}">
          <div class="md-modal-inner">
            <div class="md-top">
              <div class="md-title" v-show="flag == 'Add'">Add Product</div>
              <div class="md-title" v-show="flag == 'Edit'">Edit Product</div>
              <button class="md-close" @click="loginModelFlag=false">Close</button>
            </div>
            <div class="md-content">
              <div class="confirm-tips">
                <div class="error-wrap">
                  <!-- <span class="error error-show" v-show="errorTip">用户名或者密码错误</span> -->
                </div>
                <ul>
                  <li class="regi_form_input" v-show="flag == 'Add'">
                    <input type="text" tabindex="1" name="productId" v-model="productId" class="regi_login_input regi_login_input_left" 
                    placeholder="productId" data-type="productId">
                  </li>
                  <li class="regi_form_input" v-show="flag == 'Edit'">
                    <input type="text" tabindex="1" name="productId" v-model="productId" class="regi_login_input regi_login_input_left" 
                    placeholder="productId" data-type="productId" disabled = 'true'>
                  </li>

                  <li class="regi_form_input">
                    <input type="text" tabindex="1" name="productName" v-model="productName" class="regi_login_input regi_login_input_left" 
                    placeholder="productName" data-type="productName">
                  </li>
                  <li class="regi_form_input">
                    <input type="text" tabindex="1" name="salePrice" v-model="salePrice" class="regi_login_input regi_login_input_left" 
                    placeholder="salePrice" data-type="salePrice">
                  </li>

                  <li class="regi_form_input" v-show="flag == 'Add'">
                    <input type="text" tabindex="1" name="productImage" v-model="productImage" class="regi_login_input regi_login_input_left" 
                    placeholder="productImage" data-type="productImage" @keyup.enter="addProduct">
                  </li>
                  <li class="regi_form_input" v-show="flag == 'Edit'">
                    <input type="text" tabindex="1" name="productImage" v-model="productImage" class="regi_login_input regi_login_input_left" 
                    placeholder="productImage" data-type="productImage" @keyup.enter="EditProduct">
                  </li>
                </ul>
              </div>
              <div class="login-wrap">
                <a href="javascript:;" class="btn-login" @click="addProduct" v-show="flag == 'Add'">添   加</a>
                <a href="javascript:;" class="btn-login" @click="EditProduct" v-show="flag == 'Edit'">修   改</a>
              </div>
            </div>
          </div>    
  </div>
  <Modal :mdShow="mdShow" @close="closeModal">
              <p slot="message">确定删除商品</p>
            <div slot="btnGroup">
                <a class="btn btn--m" @click="delProduct(productId)">确定</a>
                <a class="btn btn--m" @click="mdShow = false,loginModelFlag = false">取消</a>
            </div>
          </Modal>
  <div class="md-overlay" v-if="loginModelFlag"  @click="loginModelFlag=false"></div>
  <div class="nothing"></div>
  <NavFooter></NavFooter>
  </div>
  
</template>

<script>
import '../assets/css/checkout.css'
import '../assets/css/base.css'
import '../assets/css/product.css'
import NavHeader from '../components/NavHeader'
import NavFooter from '../components/NavFooter'
import NavBread from '../components/NavBread'
import Modal from '../components/Modal'
import axios from 'axios'
export default {
data() {
    return {
        rootList:[],
        loginModelFlag:false,
        productId:'',
        productName:'',
        salePrice:'',
        productImage:'',
        flag: 'all',
        mdShow:false,
        page:0,
        pageSize:8,
        lastpage:0,
        nav:[
        ]
    }
},
components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal
},
mounted() {
    this.init()
    this.showNav()
},
methods:{

    init() {
        var param = {
         page: this.page+1,
         pageSize: this.pageSize,
        }
        axios.get('/goods/rootList',{
            params:param
        }).then((response) => {
            let res = response.data
            if(res.status == "0") {
                this.rootList = res.result
            }
        })
    },
    showAddProduct() {
        this.loginModelFlag = true
        this.flag = 'Add'
        this.productId = ''
        this.productName = ''
        this.salePrice = ''
        this.productImage = ''
    },
    addProduct() {
        axios.post('/goods/addProduct',{
            productId: this.productId,
            productName: this.productName,
            salePrice: this.salePrice,
            productImage: this.productImage
        }).then((response) => {
            let res = response.data
            if(res.status == "0") {
                alert('添加成功')
                this.loginModelFlag = false
                this.init()
            }
        })
    },
    ShowEditProduct(item) {
        this.flag = 'Edit'
        this.loginModelFlag = true
        this.productId = item.productId
        this.productName = item.productName
        this.salePrice = item.salePrice
        this.productImage = item.productImage
    },
    EditProduct() {
        axios.post('/goods/EditProduct',{
            productId: this.productId,
            productName: this.productName,
            salePrice: this.salePrice,
            productImage: this.productImage
        }).then((response) => {
            let res = response.data
            console.log(res)
            if(res.status == '0') {
                alert('修改成功')
                this.loginModelFlag = false
                this.init()
            }
        })
    },
    delProduct(productId) {
        axios.post('/goods/delProduct',{
            productId: productId
        }).then((response) => {
            let res = response.data
            if(res.status == '0') {
                alert('删除成功')
                this.mdShow = false
                this.loginModelFlag = false
                this.init()
            }
        })
    },
    closeModal() {
    this.mdShow = false
  },
  checked(index) {
      this.page = index
      this.init()
  },
  showNav() {
      axios.get('/goods/nav',{
          params:{
              pageSize:this.pageSize
          }
      }).then((response) => {
          let res = response.data
          console.log(res)
          if(res.status == '0') {
              for( let i = 0 ; i < res.result; i++) {
                  this.nav = this.nav.concat([{page: i+1}])
              }
              this.lastpage = res.result-1
          }
      })
  },
  pre() {
      if(this.page>0) {
          this.page = this.page-1,
          this.init()
      }
  },
  next() {
      if(this.page<this.lastpage) {
          this.page = this.page+1,
          this.init()
      }
  }
}
}
</script>

<style>
.container p{
    font-size: 30px;
    padding: 10px 0 10px 0;
    color: #999;
}
.container table {
    margin-top: 10px
}
.container table tr{
    border: 1px solid #999;
}
.container table tr td {
    border: 1px solid #999;
    font-size: 20px;
    padding: 5px 20px 5px 20px;
    text-align: center;
}
.container table tr td a {
    font-size: 16px;
    color: blue;
}
.container table tr td a:hover {
    color: red;
}
.container table tr td:nth-of-type(4) img {
    width: 30px;
    height: 30px;
}
.nav{
    margin-top: 30px;
}
.nav ul li{
    float: left;
    width: 40px;
    height: 40px;
    border: 1px solid #999;
    border-left: none;
    text-align: center;
    line-height: 40px;
}
.nav ul li:nth-child(2){
    font-size: 30px;
    line-height: 35px;
}
.nav ul li:nth-last-child(2){
    font-size: 30px;
    line-height: 35px;
}
.nav ul li:first-child{
    border-left: 1px solid #999;
}
.active {
    background-color: rgba(0, 100, 255,0.8);
    color: white;
}
.nothing {
    height: 100px;
}
</style>